<template>
  <div>
    <common-head></common-head>
    <div class="container">
      <div class="list-head">
        <div :class="['sale',{active:active.orderBy === 1}]"
        @click="bySale"
        >
          <span>销量</span>
          <div class="toRefresh-a">
            <div :class="['angle','forUp',
            {active:active.orderBy === 1 && active.upDown ===1}]">
            <!-- 销量升序 -->
            </div>
            <div :class="['angle','forDown',
            {active:active.orderBy === 1 && active.upDown ===0}]">
            <!-- 销量降序 -->
            </div>
          </div>
        </div>
        <div :class="['price',{active:active.orderBy === 0}]"
        @click="byPrice"
        >
          <span>价格</span>
          <div class="toRefresh-b">
            <div :class="['angle','forUp',
            {active:active.orderBy === 0 && active.upDown ===1}]">
            <!-- 价格升序 -->
            </div>
            <div :class="['angle','forDown',
            {active:active.orderBy === 0 && active.upDown ===0}]">
            <!-- 价格降序 -->
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="recommend-main">
          <div class="item"
          v-for = 'item in items'
          :key = 'item.id'
          @click="clickItem(item.id)"
          >
              <img :src="item.pic" alt="">
              <h4> {{ item.name }} </h4>
              <p> {{ item.minPrice | currency }} <span class="originalprice">{{ item.originalPrice | currency }}</span></p>
          </div>
        </div>
      </div>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import { currency } from '@filters'
import CommonHead from '@components/CommonHead'
import { getCateList } from '@api'
export default {
  data () {
    return {
      items: {},
      active: {
        orderBy: 0, // 0 代表价格 1代表销量
        upDown: 0 // 0：降序  1：升序
      }
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    bySale () {
      //  按照销量排序
      this.active.orderBy = 1
      if (this.active.upDown === 0) {
        this.active.upDown = 1
      } else {
        this.active.upDown = 0
      }
      this.fetchItems()
    },
    byPrice () {
      //  按照价格排序
      this.active.orderBy = 0
      if (this.active.upDown === 0) {
        this.active.upDown = 1
      } else {
        this.active.upDown = 0
      }
      this.fetchItems()
    },
    clickItem (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    fetchItems () {
      getCateList({
        categoryId: this.$route.params.categoryId,
        orderBy: this.orderBy
      }).then(res => {
        // console.log(res)
        // console.log(this.orderBy)
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    }
  },
  filters: {
    currency
  },
  computed: {
    orderBy () {
      let orderBy = 'ordersDown'
      if (this.active.orderBy === 1 && this.active.upDown === 1) {
        orderBy = 'ordersUp'
      } else if (this.active.orderBy === 1 && this.active.upDown === 0) {
        orderBy = 'ordersDown'
      } else if (this.active.orderBy === 0 && this.active.upDown === 1) {
        orderBy = 'priceUp'
      } else {
        orderBy = 'priceDown'
      }
      return orderBy
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.list-head{
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0;
  top: 45px;
  display: flex;
  background: rgb(255,255,255);
  justify-content: space-around;
  font-size: 16px;
  line-height: 40px;
  span{
    color: #333;
  }
  .sale.price{
    position: relative;
  }
  .price{
    &.active{
      span{
        color: #f43;
      }
    }
  }
   .sale{
    &.active{
      span{
        color: #f43;
      }
    }
  }
  .toRefresh-a{
    position: absolute;
    top: 10px;
    left: 118px;
  }
  .toRefresh-b{
    position: absolute;
    top: 10px;
    left: 305px;
  }
  .angle{
    width: 0;
    height: 0;
    border: 4px solid transparent;
    &.forUp{
      border-bottom-color: #884e22;
      margin-bottom: 3px;
      &.active{
        border-bottom-color: #f43;
      }
    }
    &.forDown{
      border-top-color: #884e22;
       &.active{
        border-top-color: #f43;
      }
    }
  }
}
.originalprice{
    text-decoration: line-through;
    color: #999;
    margin-left: 8px;
    font-size: 12px;
  }
.recommend{
  padding-top: 50px;
  .recommend-main{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 50%;
      box-sizing: border-box;
      font-size: 16px;
      padding: 10px;
      img{
        width: 100%;
      }
      h4{
        height: 20px;
        color: #666;
      }
      p{
        height: 20px;
        color: #f43;
      }
    }
  }
}
</style>
